<template>
	<div class="xtx-member-aside">
		<div class="user-manage">
			<h4>我的账户</h4>
			<div class="links">
				<RouterLink exact-active-class="active" to="/member">个人中心</RouterLink>
				<a href="javascript:;">消息通知</a>
				<router-link exact-active-class="active" to="/member/info">个人信息</router-link>
				<router-link exact-active-class="active" to="/member/safe">安全设置</router-link>
				<router-link exact-active-class="active" to="/member/address">地址管理</router-link>
				<a href="javascript:;">我的积分</a>
				<router-link exact-active-class="active" to="/member/foot">我的足迹</router-link>
				<a href="javascript:;">邀请有礼</a>
				<a href="javascript:;">幸运抽奖</a>
			</div>
			<h4>交易管理</h4>
			<div class="links">
				<RouterLink active-class="active" to="/member/order">我的订单</RouterLink>
				<a href="javascript:;">优惠券</a>
				<a href="javascript:;">礼品卡</a>
				<a href="javascript:;">评价晒单</a>
				<a href="javascript:;">售后服务</a>
			</div>
			<h4>我的收藏</h4>
			<div class="links">
				<router-link exact-active-class="active" to="/member/collect">收藏的商品</router-link>
				<router-link exact-active-class="active" to="/member/collect/special">
					收藏的专题
				</router-link>
				<router-link exact-active-class="active" to="/member/collect/brand">关注的品牌</router-link>
			</div>
			<h4>帮助中心</h4>
			<div class="links">
				<a href="javascript:;">帮助中心</a>
				<a href="javascript:;">在线客服</a>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'AppMemberAside',
};
</script>

<style scoped lang="less">
.xtx-member-aside {
	width: 220px;
	margin-right: 20px;
	border-radius: 2px;
	.user-manage {
		background-color: #fff;
		h4 {
			font-size: 18px;
			font-weight: 400;
			padding: 20px 52px 5px;
			border-top: 1px solid #f6f6f6;
		}

		.links {
			padding: 0 52px 10px;
		}

		a {
			display: block;
			line-height: 1;
			padding: 15px 0;
			font-size: 14px;
			color: #666;
			position: relative;

			&:hover {
				color: #27ba9b;
			}
			&.active {
				color: #27ba9b;

				&:before {
					display: block;
				}
			}

			&:before {
				content: '';
				display: none;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				position: absolute;
				top: 19px;
				left: -16px;
				background-color: #27ba9b;
			}
		}
	}
}
</style>
